<template>
	<navbar title="产品详情" :isBack="true"></navbar>
	<view class="image">
		<image :src="Info.image" style="width: 100%;height: 750rpx;" mode="aspectFill"></image>
	</view>
	<view class="content">
		<view class="" style="display: flex; justify-content: space-between;align-items: center;">
			<view class="" style="color: #F00505;font-weight: bold;">
				<span style="font-size: 28rpx;line-height: 1.5;">￥</span>
				<span style="font-size: 40rpx;">{{Info.price}}</span>
				 
			</view>
			<view class="" style="display: flex;align-items: center;" @tap="share">
				<image style="width: 32rpx;height: 32rpx;" src="../../static/image/share.png" mode="aspectFill"></image>
				<view class="" style="margin-left: 10rpx;font-size: 20rpx;">
					分享
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 20rpx;font-weight: bold;font-size: 32rpx;">
			{{Info.name}}
		</view>
		<view class="" style="margin-top: 10rpx;font-size: 24rpx;">
			{{Info.subtitle}}
		</view>
	</view>
	<view class="" style="width: 100%;height: 12rpx;background-color: #F9F9F9;">
	</view>
	<view class="content">
		<view class="" style="display: flex;align-items: center;margin-bottom: 20rpx;">
			<view class="" style="width: 8rpx;height: 28rpx;border-radius: 14rpx;background-color: #405EEC;">

			</view>
			<view class="" style="margin-left: 10rpx;font-weight: bold;">
				产品详情
			</view>

		</view>
		<view class="" v-html="Info.detail">

		</view>
	</view>
	<view class="" style="width: 100%;height: 12rpx;background-color: #F9F9F9;">
	</view>
	<view class="content" style="padding-bottom: 150rpx;">
		<view class="" style="display: flex;align-items: center;justify-content:space-between;margin-bottom: 30rpx;">
			<view class="" style="display: flex;align-items: center;margin-bottom: 20rpx;">
				<view class="" style="width: 8rpx;height: 28rpx;border-radius: 14rpx;background-color: #405EEC;">

				</view>
				<view class="" style="margin-left: 10rpx;font-weight: bold;">
					相关资料 <span v-if="Info.information.length">（{{Info.information.length}}）</span>
				</view>
			</view>
			<view class="" @tap="clickMore"
				style="border: 1rpx solid #BEBEBE;border-radius: 32rpx;width: 108rpx;height: 40rpx;display: flex;justify-content: center;align-items: center;color: #5A5A5A;font-size: 20rpx;">
				查看更多
			</view>
		</view>
		<view class="" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;"
			v-for="(item,index) in Info.information">
			<view class="" style="display: flex;align-items: center;" @tap="fileExtend(item)">
				<image :src="item.icon" style="width: 32rpx;height: 32rpx;" mode="aspectFill"></image>
				<view class=""
					style="width: 560rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left: 10rpx;line-height: 1;">
					{{item.name}}
				</view>
			</view>
			<image src="../../static/image/dian.png" @tap="extend(index)" style="width: 28rpx;height: 28rpx;"
				mode="aspectFill"></image>
		</view>
	</view>
	<view class=""
		style="position: fixed;bottom: 0;width: 750rpx;background-color: white;box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(36,37,38,0.15);padding: 30rpx;">
		<view class="" @tap="submit"
			style="width: 100%;height: 84rpx;display: flex;justify-content: center;align-items: center;border-radius: 52rpx;background-color: #405EEC;color: white;">
			立即抢购
		</view>
	</view>
	<u-popup v-model="popShow" border-radius="20" mode="bottom" closeable safe-area-inset-bottom>
		<view class="" style="min-height: 400rpx;padding: 30rpx;">
			<view style="text-align: center;font-weight: bold;margin-bottom: 40rpx">相关资料</view>
			<view class="" v-for="(item,index) in Info.information"
				style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;">
				<view class="" style="display: flex;align-items: center;" @tap="fileExtend(item)">
					<image src="../../static/image/pdf.png" style="width: 32rpx;height: 32rpx;" mode="aspectFill">
					</image>
					<view class="" style="width: 560rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
						{{item.name}}
					</view>
				</view>
				<image src="../../static/image/dian.png" @tap="extend(index)" style="width: 28rpx;height: 28rpx;"
					mode="aspectFill"></image>
			</view>
		</view>

	</u-popup>
	<u-action-sheet :list="sheetList" v-model="sheetShow" safe-area-inset-bottom @click="clickSheet"></u-action-sheet>

	<!-- 分享弹窗 -->
	<view class="pupup">
		<u-popup v-model="shareShow" border-radius="20" mode="bottom">
			<view class="" v-if="posterShow" style="width: 100%;display: flex;justify-content: center;margin-bottom: 30rpx;flex-direction: column;align-items: center;">
				<view class="" style="width: 680rpx;height: 870rpx;display: flex;justify-content: center;align-items: center;">
					<image :src="Info.share" style="width: 600rpx;height: 820rpx;border-radius: 30rpx;" mode="aspectFit"></image>
				</view>
				<view class="" @tap="downImage"
					style="display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #405EEC;padding: 20rpx 60rpx;border-radius: 50rpx;">
					 
					<view class="" style="color:white;font-size: 26rpx;">
						保存海报到相册
					</view>
				</view>
			</view>

			<view class="" style="width: 100%;padding-top: 40rpx;background-color: white;padding-bottom: 30rpx;">
				<view class="" style="width: 100%;padding: 0 130rpx;display: flex;justify-content:space-between;">
					<button open-type="share" style="background-color: white;margin: 0;line-height: 1;">
						<view class=""
							style="display: flex;flex-direction: column;justify-content: center;align-items: center">
							<image src="../../static/image/weixin.png" style="width:100rpx;height: 100rpx;"
								mode="aspectFill"></image>
							<view class="" style="margin-top: 30rpx;color: #000000;font-size: 28rpx;">
								分享给好友
							</view>
						</view>
					</button>
					<view class="" @tap="posterShow = true"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center">
						<image src="../../static/image/pic.png" style="width:100rpx;height: 100rpx;" mode="aspectFill">
						</image>
						<view class="" style="margin-top: 30rpx;color: #000000;">
							分享海报
						</view>
					</view>
					<!-- <view class="" @tap="downImage"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center">
						<image src="../../static/image/pic.png" style="width:100rpx;height: 100rpx;" mode="aspectFill">
						</image>
						<view class="" style="margin-top: 30rpx;color: #000000;">
							保存海报到相册
						</view>
					</view> -->
				</view>
				<view class="" style="margin-top: 40rpx;width: 100%;height: 12rpx;background-color: #F9F9F9;">

				</view>
				<view class="" @tap="shareShow = false" style="margin-top: 30rpx;text-align: center;color: #333333;">
					取消
				</view>
			</view>
		</u-popup>
	</view>
	<movable-area class="movableArea" style="right: 20rpx;">
		<movable-view class="movableView" direction="vertical" x="120rpx" y="600"  :animation="false">
			<view>
				<button open-type="contact" style="padding: 0;margin: 0;background-color:transparent">
					<image src="../../static/image/kf.png" style="width: 100rpx;height: 100rpx;" mode="aspectFill"></image>
				</button>
			
			</view>
		</movable-view>
	</movable-area>
	<!-- 联系代理商 -->
	<u-popup v-model="dlShow" mode="center"  closeable border-radius="20">
				<view class="" style="width: 510rpx;height: 280rpx;padding: 20rpx;display: flex;flex-direction: column;align-items: center;">
					<view class="" style="font-weight: bold;">
						温馨提示
					</view>
					<view class="" style="margin-top: 40rpx;">
						请您联系代理商进行购买！
					</view>
					<view class="" @tap="dlShow = false" style="width: 196rpx;height: 60rpx;border-radius: 38rpx;background-color: #405EEC;display: flex;justify-content: center;align-items: center;color: white;margin-top: 50rpx;">
						我知道了
					</view>
				</view>
			</u-popup>
	<!-- <view style="position: fixed;bottom: 300rpx;right: 0;">
		<button open-type="contact" style="padding: 0;margin: 0;background-color:transparent">
			<image src="../../static/image/kf.png" style="width: 80rpx;height: 80rpx;" mode="aspectFill"></image>
		</button>

	</view> -->
</template>

<script setup lang="ts">
	import { onLoad, onShareAppMessage, onShareTimeline, onReachBottom,onShow } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue'
	import tools from '@/utils/tools'
	import { goodsInfo } from '@/service/api/index'
	const popShow = ref(false)
	const sheetShow = ref(false)
	const shareShow = ref(false)
	const maskShow = ref(false)
	const dlShow = ref(false)
	const posterShow = ref(false)
	const informationIndex = ref('')
	const param = reactive({
		id: "",
		fid: ""
	})
	const sheetList = ref([
		{
			text: "预览"
		},
		{
			text: "下载"
		},
		{
			text: "复制链接"
		}
	])
	const Info = ref({
		information: [],
		share: ""
	}) as any
	onShow(()=>{
			getData();
			console.log(param);
	})
	onLoad((opt) => {
 
		param.id = opt.id;
		// console.log(opt.user_id);
		if (opt.user_id) {
			param.fid = opt.user_id;
		}
	
	})
	const getData = async () => {
		const res = await goodsInfo(param);

		Info.value = res.msg;
 
	}
	//保存图片
	const downImage = ()=>{
		tools.downImage(Info.value.share)
	}
	const clickSheet = (index) => {
		let item = Info.value.information[informationIndex.value];
		if (index == 0) {
			//预览

			fileExtend(item)
		} else if (index == 1) {
			//下载
			downloadFile(item)
		} else if (index == 2) {
			//复制链接
			tools.setClipboardData(item.url);

		}
		 
	}
	//下载文件
	const downloadFile = (item)=>{
		uni.downloadFile({
		
			url: item.url, success: (res) => {
				if (res.statusCode == 200) {
					uni.saveFile({
						tempFilePath: res.tempFilePath, success: (res) => {
							
							uni.showModal({
								title: '下载成功',
								content: '是否要打开文件？',
								cancelText: '我知道了',
								confirmText: '打开文件',
								success: (red) => {
									if (red.confirm) {
										uni.openDocument({
											filePath: res.savedFilePath,
											success: () => {
												tools.showToast('打开成功')
											}, fail() {
												tools.showToast('打开失败')
											}
										})
									}
								}
							})
						},
						fail() {
							tools.showToast('文件保存失败')
						}
					})
				}
			}, fail() {
				tools.showToast('文件下载失败')
			}
		})
	}
	//文件预览
	const fileExtend = (item) => {
		uni.showLoading({ title: '打开中' })
		const download = uni.downloadFile({

			url: item.url, success(res) {
				console.log(res, '下载');
				const filtPath = res.tempFilePath;//临时路径
		 
				uni.openDocument({
					filePath: encodeURI(filtPath),
					success: function (res) {
						uni.hideLoading();
						tools.showToast('打开文件成功')
						console.log(res, '打开文件成功');
					}, fail: function (err) {
						tools.showToast('打开文件失败')
						console.log('打开文件失败', err);
					}
				})
			}, fail(err) {
				tools.showToast('文件下载失败');
				console.log(err);
			}

		})
	}
	onShareAppMessage(() => {
 
		 
		return {
			title: "产品详情",
			path: "/pagesA/project/detail?user_id=" + Info.value.user_id + '&id=' + Info.value.id
		}
	})
	 
	//查看更多
	const clickMore = () => {
		popShow.value = true;
	}
	//扩展功能
	const extend = (index : any) => {
		popShow.value = false
		sheetShow.value = true;
		;
		informationIndex.value = index;
	}
	//立即抢购
	const submit = () => {
		//dlShow.value = true
		if (Info.value.rank || Info.value.dl_rank) {
			tools.navTo('/pagesA/project/order?param=' + JSON.stringify(param))
		} else {
			dlShow.value = true
			//tools.showToast('请联系代理商')
		}
	}
	//分享
	const share = () => {
		maskShow.value = true
		shareShow.value = true;

	}
</script>

<style scoped lang="scss">
	.image {
		width: 100%;
		height: 750rpx;
		//background-color: rebeccapurple;
	}

	.content {
		padding: 30rpx;

	}

	.pupup {
		:deep(.u-drawer .u-drawer-content) {
			background-color: rgba(255, 255, 255, 0) !important;
		}
	}
	
	.margin-top10{
			margin-top: 10upx;
		}
		.margin-top20{
			margin-top: 20upx;
		}
	.movableArea {
		position: fixed;
		top: 0;
		right:20upx;
		width:120upx;
		height:86%;
		z-index:15;
		pointer-events: none;//设置area元素不可点击，则事件便会下移至页面下层元素
		
		.movableView {
			pointer-events: auto;//可以点击
			width:100rpx;
			box-sizing: border-box;
		}
		.movableView_pos{
			width:90upx;
			background-color: rgba(255,255,255,0.5);
			border-radius:10upx;
			padding:10upx 5upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 2px 2px rgba(202, 202, 202, 0.35);
		}
		.movableView_icon{
			position: relative;
	
		}
	}
	.textColor{
		color: #333333;
	}
	.textck{
		display: block;
	}
	.size18{
		font-size: 18upx;
	}
	.textCen{
		text-align: center;
	}
	.image_size{
		width: 32rpx;
		height: 34rpx;
	}
</style>